<template>
  <div class="cml-panel-wrap">
    <div class="cml-panel-console"
      v-show="true">
      <!-- logo区域 -->
      <div class="cml-panel-logo">
        <slot name="logo">
          <div class="cml-panel-logo-img">
            <div class="cml-panel-logo-helper">
              <img src="./source/img/logo-uv.png"
                alt="UNICOM Visualization logo" />
            </div>
          </div>
          <div class="cml-panel-logo-text">
            <p class="cml-panel-text-en">Visualization</p>
            <p class="cml-panel-text-ch">大数据可视化平台</p>
          </div>
        </slot>
      </div>
      <!-- tab切换 -->
      <a-tabs :activeKey="activeKey"
        @change="changeTab"
        @tabClick="tabClick"
        size="small">
        <!-- 系统配置 -->
        <a-tab-pane :tab="$t('cmlpanel.system')"
          :disabled="isDisabledTab1"
          :forceRender='true'
          key="1">
          <cml-collapse ref="collapse1">
            <!-- AI 辅助 -->
            <ai-assistant index="1-1"></ai-assistant>
            <!-- 主题管理 -->
            <theme-manage index="1-2"></theme-manage>
            <!-- 音效管理 -->
            <sound-manage index="1-3"></sound-manage>
            <!-- 国际化 -->
            <i18n index="1-4"></i18n>
            <!-- 多数据源 -->
            <data-source index="1-5"></data-source>
            <!-- 系统自检 -->
            <system-check index="1-6"></system-check>
            <!-- 性能监控 -->
            <monitor v-bind="$attrs"></monitor>
            <!-- 通过插槽分发用户自定义内容 -->
            <slot name="sysconfig"></slot>
          </cml-collapse>
        </a-tab-pane>
        <!-- 项目配置 -->
        <a-tab-pane :tab="$t('cmlpanel.project')"
          :disabled="isDisabledTab2"
          :forceRender='true'
          key="2">
          <cml-collapse ref="collapse2">
            <slot name="projconfig">项目配置</slot>
          </cml-collapse>
        </a-tab-pane>
        <!-- 开发者选项 -->
        <a-tab-pane :tab="$t('cmlpanel.developer')"
          :disabled="isDisabledTab3"
          :forceRender='true'
          key="3">
          <cml-collapse :defaultOpeneds="['3-1']"
            :uniqueOpened="true"
            ref="collapse3">
            <!-- 日志 -->
            <console-panel index="3-1"></console-panel>
            <!-- 布局 -->
            <layout index="3-2"></layout>
            <!-- 映射表 -->
            <mapping-table index="3-3"></mapping-table>
          </cml-collapse>
        </a-tab-pane>
      </a-tabs>

      <!-- 控制中心 -->
      <div class="cml-panel-control">
        <div class="cml-panel-control-btn"
          @click="reset">
          <button class="cml-btn cml-reset-btn"
            id="cml-btn-reset">
            <i class="platformicon icon_zhongzhi"></i>
          </button>
          <label for="cml-btn-reset"
            class="cml-text">{{
            $t('cmlpanel.reset')
          }}</label>
        </div>
        <div class="cml-panel-control-btn"
          @click="close">
          <button class="cml-btn cml-close-btn"
            id="cml-btn-close">
            <i class="platformicon icon_guanbimianban"></i>
          </button>
          <label for="cml-btn-close"
            class="cml-text">{{
            $t('cmlpanel.exit')
          }}</label>
        </div>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="cml-panel-container"
      :class="{ 'cml-panel-hide': !isPanelOpen }">
      <!-- 顶部区域 -->
      <div class="cml-panel-container-top"
        v-show="isPanelOpen">
        <top-nav></top-nav>
      </div>
      <div class="cml-panel-container-center"
        :class="{ 'cml-hide': !isPanelOpen }">
        <div class="cml-style-helper">
          <div id="cmlFilterContainer"
            class="cml-filter-container">
            <!-- 容器 -->
            <slot></slot>
          </div>
        </div>
      </div>
      <!-- 底部区域 -->
      <div class="cml-panel-container-bottom"
        v-show="isPanelOpen">
        <footer-nav></footer-nav>
      </div>
    </div>
    <div class="cml-panel-helper"
      :class="{ 'cml-hide': !isPanelOpen }"></div>
  </div>
</template>
<script>
import { Tabs } from 'ant-design-vue'
import { mapState, mapMutations } from 'vuex'
import TopNav from './components/top-nav.vue'
import FooterNav from './components/footer-nav.vue'
import AiAssistant from './components/ai/index'
import ThemeManage from './components/theme'
import I18n from './components/i18n'
import DataSource from './components/data-source'
import Monitor from './components/monitor'
import Bus from './util/bus'
import Layout from './components/part'
import ConsolePanel from './components/consolePanel'
import MappingTable from './components/mappingTable'
import { passPanelIns } from './panelServer.js'
import CmlCollapse from './components/cml-collapse'
import CmlModule from './components/cml-module'
import CmlModuleItem from './components/cml-module-item'
import SoundManage from './components/sound'
import SystemCheck from './components/systemCheck'
import { partServer } from 'anov-core'
import { util } from 'dtc'
import merge from 'lodash.merge'

export default {
  name: 'cmlpanel',
  version: '0.0.2',
  inheritAttrs: false,
  components: {
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    TopNav,
    FooterNav,
    AiAssistant,
    ThemeManage,
    Layout,
    I18n,
    DataSource,
    Monitor,
    ConsolePanel,
    MappingTable,
    CmlCollapse,
    CmlModule,
    CmlModuleItem,
    SoundManage,
    SystemCheck
  },
  model: {},
  props: {},
  data() {
    return {
      tabsLen: 0
    }
  },
  computed: {
    ...mapState('layout', ['pages']),
    ...mapState('cmlpanel', [
      'isPanelOpen',
      'activeTab',
      'disabledTabs',
      'consolePanel'
    ]),
    // 当前激活的key
    activeKey() {
      let ac = this.activeTab,
        tabs = []
      for (let i = 0; i < this.tabsLen; i++) {
        tabs.push(i + 1 + '')
      }
      tabs = tabs.filter(tab => {
        return !this.disabledTabs.includes(tab)
      })
      if (ac && tabs.includes(ac)) {
        return ac
      } else {
        return tabs[0]
      }
    },
    isDisabledTab1() {
      return this.disabledTabs.includes('1')
    },
    isDisabledTab2() {
      return this.disabledTabs.includes('2')
    },
    isDisabledTab3() {
      return this.disabledTabs.includes('3')
    }
  },
  watch: {},
  created() {
    passPanelIns(this)
  },
  mounted() {
    this.$nextTick(() => {
      let tabs = this.getTabs()
      this.tabsLen = tabs.length
    })
  },
  beforeDestroy() {},
  methods: {
    ...mapMutations('cmlpanel', [
      'setPanelStatus',
      'setActiveTab',
      'setDisabledTabs',
      'setBlockDefaultOpen',
      'removeBlockInfo',
      'setBlockUniqOpen',
      'setLicense',
      'setConsolePanelLog',
      'setConsolePanelVuex'
    ]),
    // todo重置设置
    reset() {
      let configCopy = util.cloneDeep(window.anovDefaultConfig)
      app.init({ config: merge(configCopy, this.getRuntimeConfig()) })
    },
    getRuntimeConfig() {
      // 获取参数
      const url = window.location.href,
        search = window.location.search && window.location.search.slice(1)
      let query = search || url.slice(url.indexOf('?') + 1)
      // query 2 obj
      let obj = util.qs.parse(query, {
        allowDots: true,
        decoder: function(str, decoder) {
          if (str === 'true') {
            return true
          } else if (str === 'false') {
            return false
          } else {
            return decoder(str)
          }
        }
      })
      return obj
    },
    // 关闭面板
    close() {
      this.setPanelStatus(false)
      this.closeConsole()
    },
    // 开启面板
    open() {
      this.setPanelStatus(true)
    },
    toggle() {
      if (this.isPanelOpen) {
        this.close()
        this.closeConsole()
      } else {
        this.open()
        // this.openConsole()
      }
    },
    // 开启控制台
    openConsole() {
      this.setConsolePanelVuex(true)
      this.setConsolePanelLog(true)
    },
    // 关闭控制台
    closeConsole() {
      this.setConsolePanelVuex(false)
      this.setConsolePanelLog(false)
    },
    // 切换控制台
    toggleConsole() {
      let isOpen = this.consolePanel.vuex || this.closeConsole.log
      isOpen ? this.closeConsole() : (this.open(), this.openConsole())
    },
    // 切换标签
    changeTab() {
      // 关闭二级菜单
      Bus.$emit('close', null)
    },
    // 点击标签页
    tabClick(t) {
      if (!t || this.disabledTabs.includes(t)) return
      this.setActiveTab(t)
    },
    // 获取tabs
    getTabs() {
      return partServer.getCompByTagName('a-tab-pane')
    },
    /**
     * 展开一个block
     * @param {sting} block 索引
     */
    openBlok(index) {
      let r = `collapse${this.activeTab}`
      this.$refs[r] && this.$refs[r].open(index)
    },
    /**
     * 折叠一个block
     * @param {sting} block 索引
     */
    collapseBlock(index) {
      let r = `collapse${this.activeTab}`
      this.$refs[r] && this.$refs[r].close(index)
    },
    /**
     * 展开/折叠一个block
     * @param {sting} block 索引或者序号
     */
    toggleBlock(index) {
      let r = `collapse${this.activeTab}`
      if (!index.includes('-')) {
        index = `${this.activeTab}-${index}`
      }
      this.$refs[r] && this.$refs[r].toggleCollapse(index)
    }
  },
  // 传递part 属性-暂时无用 勿删
  setParts() {
    let routeName = this.$route.name
    this.pages.forEach((e, i) => {
      if (e.name == routeName) {
        this.parts = this.pages[i].parts
      }
    })
  }
}
</script>
<style lang="scss">
@import './style/panel-var.scss';
@import './style/panel-mixin.scss';
@import './style/common.scss';
@import './style/_ant-rest.scss';

.#{$prefix}-wrap {
  width: 100%;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  @include flex();
  .#{$prefix}-console {
    display: flex;
    flex-direction: column;

    position: relative;

    width: 300px;
    height: 100%;
    box-sizing: border-box;

    color: $text-color;
    background: $bg-color;
    /* background-image: linear-gradient(#091d2e 1px, transparent 0),
      linear-gradient(90deg, #091d2e 1px, transparent 0);
    background-size: 24px 24px; */

    font-size: 14px;
    .#{$prefix}-logo {
      display: flex;
      flex-shrink: 0;

      height: 70px;
      margin: 30px 20px;
      box-sizing: border-box;
      .#{$prefix}-logo-img {
        position: relative;

        width: 75px;
        height: 100%;
        border: 1px solid $line-color;
        border-top-color: rgba(193, 255, 251, 0.4);
        border-bottom-color: rgba(193, 255, 251, 0.4);
        border-image: 1
          linear-gradient(
            to bottom,
            $line-color 0,
            $line-color 20%,
            transparent 20%,
            transparent 80%,
            $line-color 80%,
            $line-color 100%
          );
        &:after,
        &:before {
          display: block;

          position: absolute;
          top: -2px;
          right: -2px;

          width: 3px;
          height: 3px;

          background-color: $text-color;

          opacity: 0.5;

          content: '';
        }
        &:after {
          top: 67px;
          right: -2px;
        }
        .#{$prefix}-logo-helper {
          position: relative;

          width: 100%;
          height: 100%;

          text-align: center;

          @include flex;
          &:after,
          &:before {
            display: block;

            position: absolute;
            top: -2px;
            left: -2px;

            width: 3px;
            height: 3px;

            background-color: $text-color;

            opacity: 0.5;

            content: '';
          }
          &:after {
            top: 67px;
            left: -2px;
          }
        }
      }
      .#{$prefix}-logo-text {
        position: relative;

        padding-left: 10px;
        box-sizing: border-box;
        border-top: 1px solid $line-color;
        border-bottom: 1px solid $line-color;

        @include flex(column);
        &:after,
        &:before {
          display: block;

          position: absolute;
          top: -2px;
          right: 0;

          width: 3px;
          height: 3px;

          background-color: $text-color;

          opacity: 0.5;

          content: '';
        }
        &:after {
          top: 67px;
          right: 0;
        }
        .#{$prefix}-text-en {
          align-self: flex-start;

          text-transform: uppercase;
        }
        .#{$prefix}-text-ch {
          padding-top: 4px;

          color: $text-sub-color;

          font-size: 12px;
          letter-spacing: 0.4em;
        }
      }
    }
    .#{$prefix}-content {
      flex: 1;
      overflow-y: auto;

      box-sizing: border-box;
    }

    .#{$prefix}-control {
      height: 70px;
      padding: 10px 40px 10px;
      box-sizing: border-box;

      @include flex(row, space-around);
      .#{$prefix}-control-btn {
        display: flex;
        align-items: center;

        color: #84aba699;

        .#{$prefix-s}-btn {
          border: 1px solid;
          border-radius: 50%;

          cursor: pointer;

          &:hover,
          &:focus,
          &:hover + .cml-text,
          &:focus + .cml-text {
            color: $text-active-color;
          }
        }
        .#{$prefix-s}-reset-btn,
        .#{$prefix-s}-close-btn {
          width: 30px;
          height: 30px;

          color: currentColor;
          background-color: transparent;
        }
        .cml-text {
          padding-left: 10px;

          color: currentColor;

          text-transform: uppercase;

          cursor: pointer;
        }
      }
    }
  }
  .#{$prefix}-container {
    width: calc(100% - 320px);
    height: 100%;
    .#{$prefix}-container-center {
      position: relative;

      height: calc(100% - 140px);
      box-sizing: border-box;
      border: 1px solid #293135;
      border-top: none;
      border-bottom: none;
      /* &:after, &:before {
        display: block;

        position: absolute;
        top: -1px;

        content: '';

        @include corner();
      }
      &:after {
        left: -1px;
      }
      &:before {
        top: -1px;
        right: -1px;

        transform: rotate(90deg);
      } */
      .#{$prefix-s}-style-helper {
        position: relative;

        width: 100%;
        height: 100%;
        /* &:after, &:before {
          display: block;

          position: absolute;
          bottom: -1px;

          content: '';

          @include corner();
        }
        &:after {
          left: -1px;

          transform: rotate(-90deg);
        }
        &:before {
          right: -1px;
          bottom: -1px;

          transform: rotate(-180deg);
        } */
        .cml-filter-container {
          width: 100%;
          height: 100%;
        }
      }
    }
    .#{$prefix-s}-hide {
      height: 100%;
      border: none;
      &:after,
      &:before {
        display: none;
      }
      .#{$prefix-s}-style-helper {
        &:after,
        &:before {
          display: none;
        }
      }
    }
  }
  .#{$prefix-s}-panel-helper {
    width: 20px;
    height: 100%;
    box-sizing: border-box;
    border-right: 8px solid transparent;
    border-image: 12
      repeating-linear-gradient(
        0deg,
        #c1fffb33 0,
        #c1fffb33 1px,
        transparent 1px,
        transparent 25px
      );

    background: $bg-color;
    background-image: linear-gradient(#091d2e 1px, transparent 0),
      linear-gradient(90deg, #091d2e 1px, transparent 0);
    background-size: 24px 24px;
    &.#{$prefix-s}-hide {
      display: none;
    }
  }
  .cml-panel-hide {
    width: 100%;
    margin-right: 0;
  }
}
@include moduleLayout();
</style>
